/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    CameraRoll,
    DeviceEventEmitter,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    Image
} from 'react-native';
import PlatformApi from "../api/platform/PlatformApi";
import _ from "../api/platform/JsApi";

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            _res: "点我将显示1+2=（调用平台方法）",
            img:{uri: "http://www.hangge.com/blog/images/logo.png"}
        };
        DeviceEventEmitter.addListener("jsFun", (msg) => {
            this.setState({
                _res: msg.toString()
            });
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit App.js
                </Text>
                <Text style={styles.instructions}>
                    {instructions}
                </Text>
                <TouchableOpacity
                    activeOpacity={0.8}
                    onPress={() => {
                        new PlatformApi().callFun(5, 2, (res) => {
                            this.setState({
                                _res: res.toString()
                            });
                        });
                    }}
                >
                    <Text style={styles.instructions}>
                        {this.state._res}
                    </Text>
                </TouchableOpacity>
                <Image style={styles.wrape}
                       source={this.state.img}
                />
            </View>
        );
    }

    componentWillUnmount() {
        DeviceEventEmitter.removeListener("jsFun");
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    wrape: {
        resizeMode: "contain",
        height: 100,
        width: 100
    }
});
